<template>
  <div class="home">
    <button @click="handleAsyncClick">调用vuex中的异步函数</button>

    <h1 @click="handleClick">{{ totalNum }}</h1>
  </div>
</template>

<script>
// 在组件中，对vuex的使用，只有两个方面
// 1. 拿数据渲染 （拿过来的数据放在计算属性中）
// 2. 调函数操作 （在生命周期中，template中的元素上事件调用）

// vuex辅助函数
import { mapState, mapGetters, mapMutations, mapActions } from 'vuex'
export default {
  name: 'HomeView',
  components: {},
  // vuex的数据要拿过来放置在组件的计算属性中，这样子可以提升组件性能，因为computed具有缓存功能
  computed: {
    // 拿数据
    ...mapState(['token', 'list']),
    ...mapGetters(['totalNum']),
    // 1. 拿vuex中的state数据
    // list() {
    //   return this.$store.state.list
    // },
    // // 2. 拿getters数据
    // totalNum() {
    //   return this.$store.getters.totalNum
    // },
    // token() {
    //   return this.$store.state.token
    // },
  },
  created() {},
  methods: {
    // 拿函数（mutation/action）拿过来之后，通过this可以直接调用函数名字
    ...mapMutations(['set_token']),
    ...mapActions(['getAsyncData']),
    handleClick() {
      this.set_token('我是修改后的token')
      // this.$store.commit('set_token', '我是修改后的token')
    },
    handleAsyncClick() {
      this.getAsyncData()
      // this.$store.dispatch('getAsyncData')
    },
  },
}
</script>
